<template>
	<view>
  <view class="search" v-if="code === firstCode">
    <view class="search-item">
      <view class="search-title">湘东区</view>
      <view class="vertical"></view>
      <input class="input" placeholder="请输入辖区..." @input="search"></input>
    </view>
  </view>
  <view class="location">
    <scroll-view class="search-location-list" scroll-y enable-flex>
      <view class="search-location-item" v-for="(item, index) in addressList" :key="index" @tap="getLocationItem(item)">
        <image mode="aspectFill" class="icon" src="../../static/icon.png" />
        <rich-text class="search-location" :nodes="item.address"></rich-text>
        <image mode="aspectFill" class="icon" src="../../static/arrow.png" />
      </view>
    </scroll-view>
  </view>
  </view>
</template>

<script>
import { searchAddressList, getAllAddressList } from "../../api/address_api";

export default {
  data() {
    return {
	  code: '',
      addressList: [],
      firstCode: '' // Assuming firstCode is defined somewhere in your component
    };
  },
  methods: {
    search(e) {
      let key = e.detail.value;
      searchAddressList(key).then(res => {
        this.addressList = res.data;
      });
    },
    getLocationItem(item) {
	   let { longitude, latitude } = item;
		// 触发一个名为 "updateLocation" 的事件，并将经度和纬度作为参数传递
		uni.$emit("updateLocation", { longitude, latitude });
		// 返回上一页
		uni.navigateBack({
		  delta: 1
		});
		},
	// 查询列表
    getAllAddressList() {
      getAllAddressList().then(res => {
        this.addressList = res.data;
		console.log(this.addressList)
      });
    }
  },
  onLoad() {
    this.getAllAddressList();
  }
};
</script>

<style lang="scss">
.search {
    height: 120rpx;
    width: 90vw;
    padding: 0 5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 100;
}

.search-item {
    width: 80vw;
    height: 80rpx;
    border-radius: 40rpx;
    background-color: #fff;
    display: flex;
}

.search-title {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
}

.vertical {
    height: 80rpx;
    border-right: 1px solid #ccc;
}

.input {
    flex: 3;
    height: 80rpx;
    line-height: 80rpx;
    padding: 0 20rpx;
}

.location {
    position: absolute;
    top: 0;
    height: 100vh;
    width: 100vw;
    background-color: #f0f0f0;
}

.search-location-list {
    background-color: #fff;
    height: calc(100vh - 140rpx);
    margin-top: 140rpx;
    width: 100vw;
    display: flex;
    flex-direction: column;
    border-radius: 20rpx 20rpx 0 0;
}

.search-location-item {
    height: 100rpx;
    line-height: 100rpx;
    margin-top: 10rpx;
    padding: 0 3vw;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
}

.search-location {
    width: 90vw;
    height: 100rpx;
    line-height: 100rpx;
}


.icon{
    height: 30rpx;
    width: 30rpx;
    padding: 10rpx;
}
</style>
